
import React from 'react';

import {withRouter} from 'react-router-dom';

import {Form,Input, Button, Select,Table,Tag, Space} from 'antd';
import {PlusCircleOutlined} from '@ant-design/icons';
import './infomation.styl';

const { Option } = Select;
const { Column, ColumnGroup } = Table;

class Infomation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[]
        }
    }
    onChange(value) {
        console.log(value);
    }
    onFinish(values) {
        console.log(values);
    }
    componentDidMount() {
        const data = [
            {
              key: '1',
              name: 'John',
              age: 32,
              address: 'New York No. 1 Lake Park',
              tags: ['nice', 'developer'],
            },
            {
              key: '2',
              name: 'John',
              age: 42,
              address: 'London No. 1 Lake Park',
              tags: ['loser'],
            },
            {
              key: '3',
              name: 'John',
              age: 32,
              address: 'Sidney No. 1 Lake Park',
              tags: ['cool', 'teacher'],
            },
          ];
        this.setState({
            data
        })
    }
    render() {
        return (
            <div className="infomation">
                <Form 
                name="search-form"
                className="search-form"
                layout="inline"
                onFinish={this.onFinish.bind(this)}
                >
                    <Form.Item
                        className="form-input"
                        name="title"
                        label="标题："
                    >
                        <Input />
                    </Form.Item>     
                    <Form.Item
                        className="form-select"
                        name="type"
                        label="类型"

                    >
                        <Select
                        onChange={this.onChange}
                        allowClear
                        >
                        <Option value="male">情感</Option>
                        <Option value="female">搞笑</Option>
                        <Option value="other">文学</Option>
                        </Select>
                    </Form.Item> 
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="search-form-button">
                            搜索
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button className="add-button">
                            <PlusCircleOutlined />添加
                        </Button>
                    </Form.Item>
                </Form>

                <Table 
                    className="table" 
                    dataSource={this.state.data}
                    rowSelection={{
                        type: 'checkbox'
                      }}
                    pagination={{position:['bottomCenter']}}
                >
                    <Column title="Name" dataIndex="name" key="name" />
                    <Column title="Age" dataIndex="age" key="age" />
                    <Column title="Address" dataIndex="address" key="address" />
                    <Column
                    title="Tags"
                    dataIndex="tags"
                    key="tags"
                    render={tags => (
                        <>
                        {tags.map(tag => (
                            <Tag color="blue" key={tag}>
                            {tag}
                            </Tag>
                        ))}
                        </>
                    )}
                    />
                    <Column
                    title="Action"
                    key="action"
                    render={(text, record) => (
                        <Space size="middle">
                        <a>Invite {record.lastName}</a>
                        <a>Delete</a>
                        </Space>
                    )}
                    />
                </Table>

            </div>
        );
    }
}

export default withRouter(Infomation);